<template>
    <div class="icons-wrapper">
        <category-icons-sub 
          v-for="item of itemList"
          :key="item.id"
          :bgColor="item.bgColor"
          :icon="item.icon"
          :field="item.field"
          :iconText="item.iconText"
        />
       
    </div>
</template>

<script>
import CategoryIconsSub from "./Sub";
import fieldsDatas from 'data/fields';

export default {
    name: 'CategoryIcons',
    components: {
        CategoryIconsSub
    },
    data() {
        return {
            itemList: fieldsDatas
        }
    },

}
</script>

<style lang="scss" scoped>
 @import '~styles/mixins.scss';
 @import '~styles/variables.scss';

 .icons-wrapper {
     @include flex-row;
     flex-wrap: wrap;
     background-color: #fff;
     border-bottom: 1px solid #ddd;
 }


</style>